<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <br/>
            <h3 class="title">Cadastrar DNE</h3>
            <h:form id="dneForm" enctype="multipart/form-data">
                <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
                <p:panel id="personPanel" styleClass="container_24 clearfix both withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="CEP" styleClass="grid_3" for="cepMask" />
                    <p:inputMask id="cepMask" value="#{managerDne.dne.cep}" mask="99.999-999"
                                 required="true"
                                 styleClass="grid_5"/>
                    <div class="clear-both" />

                    <p:outputLabel value="Tipo Logradouro" for="typePatioSelectOneMenu" 
                                   styleClass="grid_3" style="width: 120px !important; margin-left: 7px;" />
                    <div class="grid_3">
                        <p:selectOneMenu id="typePatioSelectOneMenu" panelStyle="width:150px;" 
                                         required="true"
                                         value="#{managerDne.tipoLogradouro}">  
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerDne.tipoLogradouroList}"/>  
                        </p:selectOneMenu>
                    </div>

                    <p:outputLabel for="patioInput" value="Logradouro" styleClass="grid_3"/>
                    <p:inputText id="patioInput" value="#{managerDne.dne.rua}"
                                 required="true"
                                 styleClass="grid_14" /> 
                    <div class="clear-both" />

                    <p:outputLabel value="Cidade" styleClass="grid_3" for="cidadeInputText" />
                    <p:autoComplete id="cidadeInputText" value="#{managerDne.cidade}" var="item"
                                    forceSelection="true" dropdown="true" styleClass="grid_21"
                                    minQueryLength="3"
                                    itemValue="#{item}" itemLabel="#{item.nome}" panelStyle="max-height:200px;"
                                    completeMethod="#{managerUtilitario.autocompleteCidade}" 
                                    converter="cidadeconverter">

                        <p:ajax event="itemSelect" update=":dneForm:bairroInputText" listener="#{managerDne.setarCidade()}" />
                        <p:ajax event="mouseup" update=":dneForm:bairroInputText" listener="#{managerDne.clearBairro()}" />
                    </p:autoComplete>

                    <div class="clear-both" />
                    <p:outputLabel value="Bairro" styleClass="grid_3" for="bairroInputText" />
                    <p:autoComplete id="bairroInputText" value="#{managerDne.bairro}" var="itemdne"
                                    forceSelection="true" dropdown="true" styleClass="grid_21"
                                    panelStyle="max-height:200px;" minQueryLength="3"
                                    required="true" 
                                    itemValue="#{itemdne}" itemLabel="#{itemdne.nome}"
                                    converter="bairroconverter"
                                    completeMethod="#{managerUtilitario.autocompleteBairro}" />

                    <div class="clear"/> 
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk" update="@form" 
                                     actionListener="#{managerDne.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="pesquisardne.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >
            </h:form>
        </ui:define>
    </ui:composition>

</html>
